<script setup lang='ts'>
import { computed, ref, onUnmounted,watch } from 'vue'
import { NCard, NTag, NSpace, NModal, NButton, NDivider,NImage } from 'naive-ui'
import { SvgIcon } from '@/components/common'
import { useMessage } from 'naive-ui'
import { payUrl, getOrderInfo } from '@/api/pay'
import to from "await-to-js";

interface Props {
	visible: boolean,
	title: string
}

interface Emit {
	(e: 'update:visible', visible: boolean): void
}
const props = defineProps<Props>()

const emit = defineEmits<Emit>()

const show = computed({
	get() {
		return props.visible
	},
	set(visible: boolean) {
		emit('update:visible', visible)
	},
})

const message = useMessage()

const showMeVisible = ref(false)
const imageUrl = ref("")
const orderMoney = ref("9.9")
const orderName = ref("初级套餐")
const orderNo = ref("")
let intervalId: string | number | NodeJS.Timer | undefined ;
// 获取支付二维码
async function getPayUrl(money: string, name: string) {
	showMeVisible.value = true;
	if(money === '0'){
		orderName.value = "购买源码"
		orderMoney.value = ''
		imageUrl.value = "http://43.139.70.230:8888/down/v7929z21iHCh.png";		
		return
	}
	const response = await payUrl({ money: money, name: name });
	imageUrl.value = response.data.url;
	orderMoney.value = money
	orderName.value = name
	orderNo.value = response.data.orderNo
	intervalId = setInterval(fetchData, POLLING_INTERVAL);
}

// 获取订单信息
async function fetchData() {
	const [err, result] = await to(getOrderInfo(orderNo.value));
	console.log("result===",result)
	if (err) {
		message.error(err.message)
		showMeVisible.value = false;
		// 停止轮询
		clearInterval(intervalId);
	} else {
		if (result.data.paymentStatus === '2') {
			message.success('您的订单已成功支付。感谢您的购买。')
			showMeVisible.value = false;
			// 停止轮询
			clearInterval(intervalId);
		}					
	}
}

// 定义轮询间隔时间，例如每5秒轮询一次
const POLLING_INTERVAL = 5000;

onUnmounted(() => {
	// 页面组件卸载前清除定时器，避免内存泄漏
	if (intervalId !== undefined) {
		clearInterval(intervalId);
	}
});

// 监听showMeVisible,如果弹框关闭了,则取消定时器
watch(showMeVisible,(newValue,oldValue)=>{
	if(!newValue){
	  // 页面关闭了,停止轮询
	  clearInterval(intervalId);
	}
});

</script>

<template>
	<NModal v-model:show="show" title="选购商品" :auto-focus="false" preset="card" style="width: 95%; max-width: 900px;">
		<div style=" display: flex; overflow: auto;
			justifyContent: center;
			alignItems: center;">
			<n-card embedded :bordered="false" style="height: 450PX;">
				<template #cover>
					<img src="http://chosen1.xyz/chu3.png">
				</template>
				<br>
				<div class="n-card__content" role="none">
					<div>
						<div class="flex items-end justify-between min-h-28">
							<div>
								<div @click="getPayUrl('9.9', '初级套餐')" class="flex items-end justify-between mt-5">
									<i class="text-xl text-[red] font-bold">9.9元</i>
									<NButton
										class="n-button n-button&#45;&#45;primary-type n-button&#45;&#45;small-type n-button&#45;&#45;dashed">
										充值
									</NButton>
								</div>
								<n-divider />
								<n-tag type="success" :bordered="false">
									解锁全部模型(限时)
									<template #icon>
										<SvgIcon icon="icon-park-twotone:correct" />
									</template>
								</n-tag>
								<n-space vertical>
									<n-tag type="success" :bordered="false">DALL·E 3</n-tag>
									<n-tag type="success" :bordered="false">gpt-3.5-turbo-1106</n-tag>
									<n-tag type="success" :bordered="false">gpt-4-1106-preview</n-tag>
									<n-tag type="success" :bordered="false">gpt-4-1106-vision-preview</n-tag>
								</n-space>
							</div>
						</div>
					</div>
				</div>
			</n-card>
			<n-card embedded :bordered="false" style="height: 450PX;">
				<template #cover>
					<img src="http://chosen1.xyz/chu3.png">
				</template>
				<br>
				<div class="n-card__content" role="none">
					<div>
						<div class="flex items-end justify-between min-h-28">
							<div>
								<div @click="getPayUrl('29.9', '高级套餐')" class="flex items-end justify-between mt-5">
									<i class="text-xl text-[red] font-bold">29.9元</i>
									<NButton
										class="n-button n-button&#45;&#45;primary-type n-button&#45;&#45;small-type n-button&#45;&#45;dashed">
										充值
									</NButton>
								</div>
								<n-divider />
								<n-tag type="success" :bordered="false">
									解锁全部模型
									<template #icon>
										<SvgIcon icon="icon-park-twotone:correct" />
									</template>
								</n-tag>
								<n-space vertical>
									<n-tag type="success" :bordered="false">DALL·E 3</n-tag>
									<n-tag type="success" :bordered="false">gpt-3.5-turbo-1106</n-tag>
									<n-tag type="success" :bordered="false">gpt-4-1106-preview</n-tag>
									<n-tag type="success" :bordered="false">gpt-4-1106-vision-preview</n-tag>
								</n-space>
							</div>
						</div>
					</div>
				</div>
			</n-card>
			<n-card embedded :bordered="false" style="height: 450PX;">
				<template #cover>
					<img src="http://chosen1.xyz/chu3.png">
				</template>
				<br>
				<div class="n-card__content" role="none">
					<div>
						<div class="flex items-end justify-between min-h-28">
							<div>
								<div @click="getPayUrl('0', '购买源码')" class="flex items-end justify-between mt-5">
									<i class="text-xl text-[red] font-bold">0元</i>
									<NButton
										class="n-button n-button&#45;&#45;primary-type n-button&#45;&#45;small-type n-button&#45;&#45;dashed">
										购买源码
									</NButton>
								</div>
								<n-divider />
								<n-tag type="success" :bordered="false">
									解锁全部模型
									<template #icon>
										<SvgIcon icon="icon-park-twotone:correct" />
									</template>
								</n-tag>
								<n-space vertical>
									<n-tag type="success" :bordered="false">DALL·E 3</n-tag>
									<n-tag type="success" :bordered="false">gpt-3.5-turbo-1106</n-tag>
									<n-tag type="success" :bordered="false">gpt-4-1106-preview</n-tag>
									<n-tag type="success" :bordered="false">gpt-4-1106-vision-preview</n-tag>
								</n-space>
							</div>
						</div>
					</div>
				</div>
			</n-card>
		</div>
	</NModal>
	<NModal v-model:show="showMeVisible" :title="orderName" :auto-focus="false" preset="card"
		style="width: 95%; max-width: 266px;">
    <n-image
      width="220"
      :src="imageUrl"
    />
		<span v-if="orderMoney">请使用微信扫码支付{{ orderMoney }}元</span>
	</NModal>
</template>
